<!-- name = "dsljf"
"name" : "dsfjk" -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <Script>
        //定义一个json对象,一个学生，一个学生有一些特性
        var student = {
            "sno": "111",
            "name": "keke",
            "sex": "f",
            "age": 12
        };
        //定义一个数组；
        var students = [
            {
                "sno": "111",
                "name": "keke",
                "sex": "f",
                "age": 12
            },
            {
                "sno": "222",
                "name": "keke",
                "sex": "f",
                "age": 13
            },
            {
                "sno": "333",
                "name": "keke",
                "sex": "f",
                "age": 14
            }
        ];
        var num = [12, 34, 45, 67, 78, 89];
        //访问json里面的数据, 访问数组和访问对象里面的数据是不一样的；
        // alert(students[0]);   //访问数组里面的数据用 students[0]
        // alert(student.sno);   //访问对象里面的数据是用 student.sno 

        //复杂的json对象
        var person = {
            "name": "keke",
            "sex": "f",
            "age": "19",
            "hobby": ["reading", "sporting", "running"],
            "address": {
                "shengfen": "hubei",
                "jiedao": "shangoa",
                "menpaihao": "1212"
            }
        };
        //访问人名
        // alert(person.name + "的爱好是：" + person.hobby);

        //json 描述整个班级中每一个学生的信息以及总人数的信息；
        var aClass = [
            { "name": "kk", "sno": "12233", "sex": "f" },

            { "name": "kk", "sno": "12233", "sex": "f" },

            { "name": "kk", "sno": "12233", "sex": "f" },

            { "name": "kk", "sno": "12233", "sex": "f" }
        ];
        //总人数信息？？？上面只是描述了每一个学生
        var jsonData = {
            "totalPeople": "4",
            "students": [
                { "name": "kk", "sno": "12233", "sex": "f" },

                { "name": "dd", "sno": "13453", "sex": "f" },

                { "name": "ee", "sno": "55233", "sex": "m" },

                { "name": "ww", "sno": "12783", "sex": "m" }
            ]
        };
        // alert(jsonData.students[0].sex);
        // 把以上数据以表格的方式展示到页面上；

        window.eval("var x = 100");
        // alert("x = " + x);

        //把以上数据以表格的方式展示到页面上；
        // window.onload = function () {  //当页面加载完之后执行这个函数；
        //     function myfunc() {
        //         alert("ddd");
        //     }

        // };
        //将json数据放到下面进行解析出来，用拼字符串的方法；
        //把 students 数组拿出来for循环，循环之后拼成表格
        function myfunc() {
            // alert("ddd");
            var text = "";
            var students = jsonData.students;  //拿到了学生的数据
            for (var i = 0; i < students.length; i++) {
                //这个循环里面怎么写呢？循环name[0], name[1], name[2]
                //!!!每循环一次要取出一个员工的信息；循环一次拼出一个tr

                var student = students[i]; //这是一个学生的信息；

                text += '<tr>';
                text += '<td>' + student.name + '</td>';
                text += '<td>' + student.sno + '</td>';
                text += '<td>' + student.sex + '</td>';
                text += '</tr>';
            }
            //把上面嵌入的东西放到tbody里面即可
            document.getElementById("stuBody").innerHTML = text;
            //?显然，这个innerHTML我还没太搞清楚；
            document.getElementById("count").innerHTML = jsonData.totalPeople;

        };
    </Script>
</head>

<body>
    <!-- 把json对象里面的数据放到这个表格里面，在浏览器中显示出来 -->
    <!-- 点击这个button，就把数据放到table里面并显示出来； -->
    <button id="dispalybtn " type="button" value="显示学生信息列表" onclick="myfunc()">显示学生信息列表</button>
    <h2>学生信息列表</h2>
    <hr>
    <table border="1px solid black" style="width: 50%;" align="center">
        <thead>
            <tr>
                <th>学生学号</th>
                <th>学生姓名</th>
                <th>学生性别</th>
            </tr>
        </thead>
        <tbody id="stuBody">
            <!-- <tr>
                <td>kk</td>
                <td>1234</td>
                <td>f</td>
            </tr>
            <tr>
                <td>kk</td>
                <td>1234</td>
                <td>f</td>
            </tr>

            <tr>
                <td>kk</td>
                <td>1234</td>
                <td>f</td>
            </tr> -->
        </tbody>
    </table>
    <div>共<span id="count">0</span>条</div>
</body>

</html>